<template>
    <div class="dandetails">

        <div class="container">
            <scroller
                    :on-refresh="refresh"
                    :on-infinite="infinite">
                <header v-if="author">
                    <img :src="author.avatar||'//common-1253410441.file.myqcloud.com/coverimg/20170621164206.png'"
                         alt="author.nick">
                    <p>
                <span class="pinfo">
                    <strong>{{author.nick}}</strong>
                    <b>{{create}}</b>
                </span>
                        <span class="perinfo">
                    <strong> {{profitRate}}<i>%</i></strong>
                    <b>本单盈利率</b>
                </span>
                    </p>
                </header>
                <section class="infocon">
                    <p class="intro">{{remark}}</p>
                    <img :src="imgUrl" alt="">
                </section>

                <section class="msgcon">
                    <h6>最新评论</h6>
                    <ul v-if="msglists.length>0">
                        <li v-for="(item,index) in msglists" :key="index">
                            <div class="headtop">
                                <img class="headimg"
                                     :src="item.author.avatar||'//common-1253410441.file.myqcloud.com/coverimg/20170621164206.png'"
                                     :alt="item.author.nick"/>
                                <p class="headinfo">
                                <span>
                                    <strong class="nick">{{item.author.nick}}</strong>
                                    <b class="data">{{item.date}}</b>
                                </span>
                                    <strong class="msginfo">{{item.content}}</strong>
                                </p>
                            </div>
                            <aside>
                                <a v-if="item.author.zj" class="del" href="javascript:;"
                                   @click="deletemsg(item.id)">删除</a>
                                <a v-else class='jubao' @click="jubao=true;jubaoid=item.id" href="javascript:;">举报</a>
                                <em @click="setlike(item.id)"><img
                                        :src="`//common-1253410441.file.myqcloud.com/activityimg/${item.liked ? '20171228102524' : '20171228102523'}.png`"/><i
                                        v-if="item.likes>0" class="likes">{{item.likes}}</i></em>
                            </aside>
                        </li>
                    </ul>
                </section>
            </scroller>

        </div>
        <footer class="fixfooter">
            <span @click="showmsgbox"><icon name="message"></icon>评论</span>
            <span @click="setlikedan(id)"><icon :class="liked?'red':''" :name="liked?'zanshi':'zan'"></icon>点赞 {{likes>0?likes:''}}</span>
        </footer>
        <div v-transfer-dom>
            <popup v-model="showsendmsg" position="top" max-height="50%" :hide-on-blur="false">
                <group title="晒单评论">
                    <x-textarea :max="100" v-model="content" placeholder="请输入内容"></x-textarea>
                </group>
                <footer class="opear">
                    <button @click="showsendmsg=false">取消</button>
                    <button class="sure" @click="sendmsg(id)">确定</button>
                </footer>
            </popup>
        </div>
        <div v-transfer-dom>
            <popup v-model="jubao" position="bottom">
                <checklist ref="demoObject" title="选择举报原因" label-position="left" :options="commonList"
                           v-model="checklist002"
                           @on-change="change"></checklist>
                <a href="javascript:;" class="submit" @click="jubaofn">提交</a>
            </popup>
        </div>
    </div>
</template>

<script>
    import {Marquee, MarqueeItem, Toast, Popup, Group, TransferDom, XTextarea, XButton, Checklist} from 'vux';
    import {getMytoken, getLogintoken} from '../../services/common';
    import {nativetonative} from '../../utils/otherfn';
    import {namesource, jumptype} from '../../utils/config/common';
    import axios from 'axios';
    import {delay} from '../../utils/common';
    import {getdandetailsR, getMessagesR} from '../../services/hello';
    import {concat, findIndex, propEq, remove, clone} from 'ramda';
    export default {
        directives: {
            TransferDom
        },
        components: {
            TransferDom,
            Marquee,
            MarqueeItem,
            Toast,
            Popup,
            Group,
            XTextarea,
            XButton, Checklist
        },
        data() {
            return {
                author: null,
                nick: '',
                imgUrl: [],
                page: 1,
                id: 0,
                create: '',
                profitRate: '0',
                remark: '',
                msglists: [],
                likes: 0,
                content: '',
                liked: false,
                showsendmsg: false,
                jubao: false,
                jubaoid: 0,
                commonList: ['广告', '黄色信息', '违法信息', '反动'],
            };
        },
        filters: {
            getstate: function ([diPlan,state]) {
                if(diPlan) {
                    return '//common-1253410441.file.myqcloud.com/activityimg/20180105110946.png'
                }
                if(state === 6) {
                    return '//common-1253410441.file.myqcloud.com/activityimg/20180105111705.png'
                }
                if(state === 5) {
                    return '//common-1253410441.file.myqcloud.com/activityimg/20180105111619.png'
                }
            }
        },
        created() {
            this.id = this.$route.params.id;
            this.getlists(this.id);
            this.getmessages(1);
        },
        computed: {

        },
        methods: {
            showmsgbox(){
                this.showsendmsg = true;
                getLogintoken(function (value) {
                    if(value) {
                        location.reload();
                    }
                }).then(async({token})=> {

                })
            },
            async refresh(done){
                await delay(1000);
                await this.getmessages(1);
                done();
            },
            async infinite(done){
                await delay(1000);
                this.page = this.page + 1;
                const over = await this.getmessages(this.page, true);
                if(over) {
                    this.page = this.page - 1;
                    done(true);
                    return;
                }
                done();
            },
            async jubaofn(){
                getLogintoken(function (value) {
                    if(value) {
                        location.reload();
                    }
                }).then(async({token})=> {
                    if(!token) {
                        return;
                    }
                    const content = this.$refs.demoObject.getFullValue().map((e, i)=>e.value).join(',');
                    if(content === '') {
                        this.$vux.toast.text('请选择');
                        return;
                    }
                    const {data}=await axios.post('/news/news/complain', {
                        content,
                        target: this.jubaoid,
                        targetType: 4
                    }, {
                        headers: {
                            token
                        }
                    });
                    if(data && data.code === 0) {
                        this.$vux.toast.text('举报成功');
                        this.jubao = false;
                    }
                    else {
                        this.$vux.toast.text(data.msg);
                    }
                });
            },
            async sendmsg(target){
                const {token}=await getMytoken();
                const {content}=this;
                if(content.length < 2) {
                    this.$vux.toast.text('内容太少');
                    return;
                }
                const {data}=await axios.post('/master/comment', {content, target, targetType: 1}, {
                    headers: {
                        token
                    }
                });
                if(data && data.code === 0) {
                    this.$vux.toast.text('发表成功');
                    this.getmessages(1);
                    this.showsendmsg = false;
                }
                else {
                    this.$vux.toast.text(data.msg);
                }
            },
            async setlikedan(target){
                getLogintoken(function (value) {
                    if(value) {
                        location.reload();
                    }
                }).then(async({token})=> {
                    if(!token) {
                        return;
                    }
                    if(this.liked) {
                        this.$vux.toast.text('你已经赞过啦');
                        return;
                    }
                    const {data}= await axios.post('/master/like', {target, targetType: 5}, {
                        headers: {
                            token
                        }
                    });
                    if(data && data.code === 0) {
                        this.liked = true;
                        this.likes++;
                    }
                    else {
                        this.$vux.toast.text(data.msg);
                    }

                });
            },
            async setlike(target){
                getLogintoken(function (value) {
                    if(value) {
                        location.reload();
                    }
                }).then(async({token})=> {
                    if(!token) {
                        return;
                    }
                    const {data}= await axios.post('/master/like', {target, targetType: 4}, {
                        headers: {
                            token
                        }
                    });
                    if(data && data.code === 0) {
                        this.msglists.map((e, i)=> {
                            if(e.id === target) {
                                e.liked = true;
                                e.likes++
                            }
                        });
                        this.msglists = clone(this.msglists);
                    }
                    else {
                        this.$vux.toast.text(data.msg);
                    }
                });
            },
            async deletemsg(id){
                this.$vux.confirm.show({
                    title: '删除提示',
                    content: '是否要删除',
                    onCancel () {
                    },
                    onConfirm: async()=> {
                        const {token}=await getMytoken();
                        const {data}= await axios.post('/master/comment/delete', {id}, {
                            headers: {
                                token
                            }
                        });
                        if(data && data.code === 0) {
                            this.msglists = remove(findIndex(propEq('id', id), this.msglists), 1, this.msglists);
                        }
                        else {
                            this.$vux.toast.text(data.msg);
                        }
                    }
                });
            },
            async getmessages(page, loadermore){
                const {token}=await getMytoken(true);
                const {id}=this;
                const {data}=await getMessagesR({token, page, target: id});
                if(data && data.code === 0) {
                    if(loadermore) {
                        if(data.data.value.length === 0) {
                            return true;
                        }
                        else {
                            this.msglists = concat(this.msglists, data.data.value);
                        }
                    }
                    else {
                        this.page = 1;
                        this.msglists = data.data.value;
                    }
                }
            },
            async getlists(id){
                const {token}=await getMytoken(true);
                const {data}=await getdandetailsR(id, token);
                if(data && data.code === 0) {
                    const {author, create, remark, imgUrl, liked, profitRate, likes}=data.data;
                    this.author = author;
                    this.create = create;
                    this.remark = remark;
                    this.imgUrl = imgUrl;
                    this.liked = liked;
                    this.likes = likes;
                    this.profitRate = profitRate.replace('%', '');
                }
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/less">
    @import "../app";

    .dandetails {
        height: 100%;
        display: flex;
        flex: 1;
        flex-direction: column;
        background: #fff;
        .container {
            flex: 1;
            display: flex;
            overflow: scroll;
            flex-direction: column;
            position: relative;
        }
        header {
            display: flex;
            height: 128px;
            justify-content: center;
            align-items: center;
            padding: 0 30px;
            border-bottom: 1px solid #f2f2f2;
            background: #fff;
            img {
                width: 90px;
                height: 90px;
                border-radius: 50%;
                margin-right: 20px;
            }
            p {
                flex: 1;
                display: flex;
                span {
                    display: flex;
                    flex-direction: column;
                    b {
                        font-size: 24px;
                        color: #999;
                    }
                }
                .pinfo {
                    flex: 1;
                    strong {
                        font-size: 32px;
                    }
                }
                .perinfo {
                    text-align: center;
                    strong {
                        color: #ff4052;
                        font-size: 40px;
                        i {
                            font-size: 24px;
                        }
                    }
                }
            }
        }
        .infocon {
            background: #fff;
            padding: 0 30px;
            margin-bottom: 20px;
            .intro {
                height: 93px;
                display: flex;
                align-items: center;
                font-size: 32px;
            }
            img {
                display: block;
                width: 100%;
            }
        }
        .msgcon {
            background: #fff;
            padding: 0 30px;
            border-top: 20px solid #f2f2f2;
            h6 {
                font-size: 36px;
                height: 90px;
                display: flex;
                align-items: center;
            }
            ul {
                li {
                    display: flex;
                    flex-direction: column;
                    margin-bottom: 20px;
                    position: relative;
                    aside {
                        position: absolute;
                        right: 0;
                        top: 0;
                        a {
                            font-size: 24px;
                            margin-right: 20px;
                            &.del {
                                color: @color13;
                            }
                        }
                        img {
                            width: 36px;
                            height: 36px;
                        }
                    }
                    .headtop {
                        display: flex;
                        .headinfo {
                            flex: 1;
                            display: flex;
                            flex-direction: column;
                            margin-bottom: 10px;
                            border-bottom: 1px solid #e6e6e6;
                            span {
                                display: flex;
                                flex-direction: column;
                                justify-content: center;
                                strong {
                                    font-size: 28px;
                                    line-height: 1;
                                }
                                b {
                                    font-size: 24px;
                                    color: #999;
                                }
                            }
                            .msginfo {
                                padding: 20px 0;
                            }
                        }
                        .headimg {
                            width: 60px;
                            height: 60px;
                            border-radius: 50%;
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
        .fixfooter {
            height: 90px;
            display: flex;
            background: #fff;
            padding: 20px 0;
            box-sizing: border-box;
            border-top: 1px solid #ccc;
            span {
                display: flex;
                align-items: center;
                justify-content: center;
                flex: 1;
                font-size: 28px;
                color: #666;
                &:first-child {
                    border-right: 1px solid #ccc;
                }
                svg {
                    width: 40px;
                    height: 40px;
                    margin-right: 20px;
                    &.red {
                        color: @color6;
                    }
                }
            }
        }
    }

    .submit {
        height: 88px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        background: @color6;
        font-size: 36px;
    }

    .opear {
        height: 88px;
        display: flex;
        button {
            display: flex;
            flex: 1;
            justify-content: center;
            align-items: center;
            font-size: 36px;
            border: none;
            &.sure {
                background: @color6;
                color: #fff;
            }
        }
    }

</style>